<template>
  <div class="details-container app-container" v-loading="listLoading">
    <div class="detail-title">
      <div>{{ this.editQuery.pre_db_para_id_public_middle_table ? '编辑' : '新增' }}新闻</div>
      <el-button type="primary" size="small" @click="onSave">修改</el-button>
    </div>
    <div class="detail-content">
      <el-form :model="editQuery" label-width="110px" ref="refForm">
        <el-form-item label="新闻标题：" prop="mid_table_remark_001" :rules="[{ required: true, message: '请输入新闻名称' }]">
          <el-input v-model="editQuery.mid_table_remark_001" placeholder="请输入新闻名称"></el-input>
        </el-form-item>

        <el-form-item label="缩略图：" prop="mid_table_remark_002" :rules="[{ required: true, message: '请上传缩略图' }]">
          <div class="detail-img">
            <SingleImage ref="singleImage" :limit="1" :keyWord="keyWord" @imagesData="onChange"></SingleImage>
          </div>
        </el-form-item>

        <el-form-item label="新闻时间：" prop="mid_table_remark_004">
          <el-date-picker v-model="editQuery.mid_table_remark_004" placeholder="选择新闻发生时间" type="datetime"
            format="yyyy-MM-dd HH:mm" value-format="yyyy-MM-dd HH:mm">
          </el-date-picker>
        </el-form-item>

        <el-form-item label="发布者：" prop="mid_table_remark_005">
          <el-input v-model="editQuery.mid_table_remark_005" placeholder="请输入发布者"></el-input>
        </el-form-item>

        <el-form-item label="新闻内容：" prop="mid_table_remark_008">
          <tinymce v-model="editQuery.mid_table_remark_008" value="123" @input="(e) => {
            editQuery.mid_table_remark_008 = e;
          }"></tinymce>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { getNewsDetail, newsEdit } from "@/api/news";
import tinymce from "@/components/Tinymce";
import SingleImage from '@/components/UploadImages/UploadImages.vue'
import { encode, decode } from 'js-base64';
export default {
  name: "NewsEdit",
  components: {
    tinymce,
    SingleImage
  },
  data() {
    return {
      keyWord: "goodsDescImage",
      listLoading: true,
      editQuery: {
        invoke_method: "public_insert_or_update_middle_table",
        pre_db_para_middle_table_name: "public_middle_table_lite_mod_news_msg",
        type_middle_app: '10001',
        type_inner_app: '1001',
        is_online: '0',
        mid_table_remark_001: null, // 新闻标题
        mid_table_remark_002: null, // 缩略图
        mid_table_remark_003: null, // 新闻状态 301未发布  302已发布
        mid_table_remark_004: null, // 新闻时间
        mid_table_remark_005: null, // 发布者
        mid_table_remark_008: null, // 新闻内容 富文本录入，base64存储
        pre_db_para_id_public_middle_table: null, // 新闻id
      },
      detailQuery: {
        invoke_method: 'public_load_middle_table_list',
        pre_db_para_middle_table_name: 'public_middle_table_lite_mod_news_msg',
        type_middle_app: '10001',
        type_inner_app: '1001',
        is_online: '0',
        pre_db_para_begin_idx: 0,
        pre_db_para_length_4_list: 10,
        id_public_middle_table: null,
      }
    };
  },
  async mounted() {
    const id = this.$route.query.id || null;
    this.editQuery.pre_db_para_id_public_middle_table = id;
    this.detailQuery.id_public_middle_table = id;
    if (id) {
      const content = await getNewsDetail(this.Qs.stringify(this.detailQuery)).then(res => {
        if (res.page_content?.length > 0) {
          return res.page_content[0]
        }
        return false
      })
      if (content) {
        this.editQuery.mid_table_remark_001 = content.mid_table_remark_001;
        this.editQuery.mid_table_remark_002 = content.mid_table_remark_002;
        this.editQuery.mid_table_remark_003 = content.mid_table_remark_003;
        this.editQuery.mid_table_remark_004 = content.mid_table_remark_004;
        this.editQuery.mid_table_remark_005 = content.mid_table_remark_005;
        this.editQuery.mid_table_remark_008 = content.mid_table_remark_008 && decode(content.mid_table_remark_008);
        this.editQuery.is_online = content.is_online;
        this.editQuery.pre_db_para_id_public_middle_table = content.id_public_middle_table;
      }
      if (content.mid_table_remark_002?.length) {
        this.$nextTick(() => {
          this.$refs.singleImage.setImageList(this.keyWord, [{
            image_url: content.mid_table_remark_002,
            is_online: 0
          }])
        })
      }
    }
    this.listLoading = false;

  },
  methods: {
    onChange(e) {
      if (e.length && e[0].image_url?.length) {
        this.editQuery.mid_table_remark_002 = e[0].image_url;
      }
    },
    async onSave() {
      const validate = await this.$refs.refForm.validate().catch(res => false);
      if (!validate) return false;
      const params = {
        ...this.editQuery,
      }
      if (params.mid_table_remark_008) {
        params.mid_table_remark_008 = encode(params.mid_table_remark_008)
      }
      newsEdit(this.Qs.stringify(params)).then(res => {
        if (res.page_content?.length > 0) {
          this.$message.success('操作成功');
          this.$router.go(-1)
        }
      }).catch(err => {
        this.$message.error(err);
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.detail-title {
  border-bottom: 1px solid #e3e3e3;
  padding: 16px 0;
  font-size: 16px;
  font-weight: bold;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.detail-content {
  padding: 24px 24px 0;

  .detail-img {
    // width: 100px;
    // height: 100px;
    // background: red;
    // overflow: hidden;
  }
}
</style>